const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');
// 这些代码就是dll优化的代码
const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./public/dll/vendor-manifest.json')
    }])
  // 这里是把相关文件引用入到html模板中
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'public/dll/vendor.dll.js')),
          outputPath: 'dll', // 把dll.js输出到目录
          publicPath: 'dll' // dll打包时的目录,会把他复制到build的目录下，html script会引用下面的dll.js
        },
        {
          filepath: require.resolve(path.resolve(__dirname, 'public/dll/vendor2.dll.js')),
          outputPath: 'dll', // 把dll.js输出到目录
          publicPath: 'dll' // 复制dllm目录到build目录下，html script会引用下面的dll.js
        }
      ]
    ])
    .after('html')
};
module.exports = {
  // baseUrl 已弃用  这个影响index.html里js文件路径的引入
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  chainWebpack: config => {
    // 生产模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // entry找到默认的打包入口，调用clear则是删除默认的打包入口 add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')

      config.set('externals', {  // 使用externals设置排除项
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

      dllReference(config)  // dll打包 

      // 首页不同:cdn引入包
      config.plugin('html').tap(args => {
        // htmlWebpackPlugin.options添加参数isProd
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      // 首页不同：不cdn引入包
      config.plugin('html').tap(args => {
        // htmlWebpackPlugin.options添加参数isProd
        args[0].isProd = false
        return args
      })
    })
  },
  css: {
    extract: false
  }
}
